<template>
	<view>
		<view class="allbanner" style="position: relative;">
			<view class="bannercenter flexcolumn">
				<view class="bannerimgtext">
					<image src="@/static/image/system/f7xn.png" mode="" class=""></image>
				</view>
				<view class="bannertext3 margin_top">法律法规</view>
			</view>
			<image :src="topimg" mode=""></image>
		</view>
		<!-- 内容 -->
		<view class=" ffffff mainpadding">
			<view class="sousuobox">
				<view class="flexbetween">
					<input type="text" placeholder="请输入输入关键词" @confirm="search()" v-model="keywords"
						confirm-type="search">
					<view class="flexright" @click="search()">
						<view class="strongtext margin_right1">搜索</view>
						<u-icon name="search" color="#c89d3b" size="20"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<view class="block">
			
			<!-- 分类 -->
			<view class="lansebox radius">
				<view class="flextops flex_wrap">
					<view class="sanshi flexcenter" v-for="item in data" :key="item.id" @click="tzfl(item)">
						<view class="">
							<view class="iconfl">
								<image :src="item.image_text" mode=""></image>
							</view>
							<view class="nostrongtext textcenter margin_top2">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 推荐专业 -->
			<view class="ffffff mainpadding margin_top radius">
				<view class="titletext">推荐专业</view>
				<view class="nostrongtext margin_top2" :class="index==data[0].child.length-1?'':'allxiahian'" v-for="(item,index) in data[0].child" :key="item.id" @click="tzfl2(item)">{{item.name}}</view>
				<!-- <view class="flexcenter margin_top2">
					<view class="huisetext1">查看更多</view>
					<view class="huisetext1">收起更多</view>
				</view> -->
			</view>
			<!-- 相关推荐 -->
			<view class="ffffff mainpadding margin_top radius">
				<view class="titletext">相关推荐</view>
				<view class="nostrongtext margin_top2" :class="index==xgrec_flfgtype.length-1?'':'allxiahian'" v-for="(item,index) in xgrec_flfgtype" :key="item.id" @click="tzfljs(item.id)">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				topimg: "",
				data:[],
				rec_flfgtype:[],
				xgrec_flfgtype:[],
				keywords:"",
			}
		},
		onLoad() {
			this.getbanner()
			this.index()
		},
		methods: {
			search(){
				uni.navigateTo({
					url: '/pages/index/falvjs?keywords='+this.keywords
				})
			},
			// 跳转法律解释
			tzfljs(id){
				uni.navigateTo({
					url:'/pages/index/falvjs?id='+id
				})
			},
			index() {
				httpRequest.request('/api/index/flfgTypeIndex', 'GET', {
				}, false, false, true).then(res => {
					this.data = res.data.data
					this.rec_flfgtype = res.data.rec_flfgtype
					this.xgrec_flfgtype = res.data.xgrec_flfgtype
				})
			},
			getbanner() {
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 11,
					is_more: 2
				}, false, false, true).then(res => {
					this.topimg = res.data.image_text
				})
			},
			// 跳转法律
			tzfl(item) {
				let data = {
					id:item.id,
					name:item.name,
					child:item.child
					// childid:item.child[0].id,
					// childname:item.child[0].name,
				}
				uni.navigateTo({
					url: '/pages/index/falv?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			tzfl2(item) {
				// let data = {
				// 	id:item.pid,
				// 	name:this.data[0].name,
				// 	childid:item.id,
				// 	childname:item.name,
				// }
				// uni.navigateTo({
				// 	url: '/pages/index/falv?msg=' + encodeURIComponent(JSON.stringify(data))
				// })
				uni.navigateTo({
					url: '/pages/index/falvjs?id=' + item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fudongdw {
		position: absolute;
		bottom: 68rpx;
		left: 36%;
	}

	.iconflg {
		margin: auto;
		width: 74.34rpx;
		height: 96.52rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.iconfl {
		margin: auto;
		width: 97.12rpx;
		height: 96.52rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.sanshi {
		width: 33.33%;
	}

	.lansebox {
		background-color: #F4FBFF;
		padding: 30rpx;
	}

	.block {
		background-color: #F4F4F4;
		padding: 30rpx 30rpx 60rpx;
	}
</style>